<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>


<div id="app">
	<input type="button" value="点击" @click="flag=!flag" />
	<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
		<div class="ball" v-show="flag"> </div>
	</transition>
</div>


<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false,
		},
		methods: {
			beforeEnter(el) {
				el.style.transform = "translate(0, 0)"
			},
			enter(el, done) {
				console.log(el.offsetWidth);
				el.style.transform = "translate(150px, 450px)"
				el.style.transition = 'all 0.6s ease'
				done();
			},
			afterEnter(el) {
				this.flag = !this.flag
			},
		}
	})
</script>

<style type="text/css">
	.ball {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: red;
		transition: all 1s ease;
	}
</style>